<template>
  <div class="doumee-filter">
    <el-form inline label-suffix="：" @submit.native.prevent>
      <template v-for="(item, index) in queryFormConfig.formItems">
        <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed" :label="item.label">
          <el-input
            v-model="searchForm[item.filed]"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :placeholder="item.placeholder?item.placeholder: '请输入' + item.label"
            class="w200"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label" :label="item.label">
          <el-input
            v-model="searchForm[item.filedStrt]"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :placeholder="item.start"
            style="width: 150px"
          />
          <div class="date-division-line" style="margin-left: 10px;margin-bottom: 0;">~</div>
          <el-input
            v-model="searchForm[item.filedEnd]"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :placeholder="item.end"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed" :label="item.label">
          <el-select
            v-model="searchForm[item.filed]"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :placeholder="item.placeholder?item.placeholder: '请选择' + item.label"
            class="w200"
            @change="changeForm(item.filed)"
          >
            <el-option v-for="opt,i in item.options" :key="i" :value="item.valueCode?opt[item.valueCode]:opt.value" :label="item.labelCode?opt[item.labelCode]:opt.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed" :label="item.label || '日期'">
          <el-date-picker
            v-model="searchForm[item.filed]"
            type="date"
            value-format="yyyy-MM-dd"
            class="w200"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :placeholder="item.placeholder || '请选择日期'"
            :picker-options="item.pickerOptions || {}"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed" :label="item.label || '选择日期'">
          <el-date-picker
            v-model="searchForm[item.filed]"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :start-placeholder="item.start || '开始日期'"
            :end-placeholder="item.end || '结束日期'"
            :picker-options="item.pickerOptions || pickerOptions"
            class="w400"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed" :label="item.label || '选择时间'">
          <el-time-picker
            v-model="searchForm[item.filed]"
            is-range
            range-separator="至"
            format="HH:mm"
            value-format="HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            class="w400"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed" :label="item.label || '选择日期'">
          <el-date-picker
            v-model="searchForm[item.filed]"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="item.pickerOptions || pickerOptions"
            range-separator="至"
            :clearable="(item.clearable!==null && item.clearable!==undefined && item.clearable!=='')?item.clearable: true"
            :start-placeholder="item.start || '开始时间'"
            :end-placeholder="item.end || '结束时间'"
            class="w400"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
      </template>
      <!-- 操作 -->
      <slot name="xzDate" />
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查找</el-button>
        <el-button v-if="showQk" @click="clear">清空</el-button>
        <slot name="btns" />
        <template v-if="queryFormConfig.formItems.length > listLength">
          <el-button v-if="!showZk" type="text" @click="zkBtn">展开<i class="el-icon-caret-bottom primaryColor" /></el-button>
          <el-button v-if="showZk" type="text" @click="zkBtn">收起<i class="el-icon-caret-top primaryColor" /></el-button>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    showQk: {
      type: Boolean,
      default: true
    },
    listLength: {
      type: Number,
      default: 3
    },
    queryFormConfig: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showZk: false,
      pickerOptions: {
        shortcuts: [{
          text: '近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近30天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近60天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近90天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 89)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate(time) {
          var curDate = new Date(new Date().toLocaleDateString()).getTime()
          var preDate = new Date(curDate + 24 * 60 * 60 * 1000 - 1)
          return time.getTime() > preDate
        }
      }
    }
  },
  emits: ['input', 'handleQuery', 'clear'],
  computed: {
    searchForm: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    handleQuery() {
      this.$emit('handleQuery')
    },
    changeForm(filed) {
      this.$emit('changeForm', filed)
    },
    zkBtn() {
      this.showZk = !this.showZk
      this.$emit('zkBtn', this.zk)
    },
    clear() {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
